@charset 'utf-8';

@import 'common';

.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    background: #f7f7f7;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: gr(99);
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}

footer{
    width: 100%;
    height: gr(99);
    position: absolute;
    bottom: 0;
    border-top: gr(1) solid #c1c1c1;
}


header{ 
    .retreat-btn{
        width: gr(49);
        height: gr(36);
        float: left;
        line-height: gr(36);
        margin-top: gr(17);
        margin-left: gr(30);
        i{
            color: #848689;
            font-size: gr(55);
            text-align: center;
            vertical-align: top;
        }
    }
    
    h3{
       width: gr(144);
       height: 100%;
       font-size: gr(33);
       text-align: center;
       color: #333333;
       margin: 0 auto;
       line-height: gr(87);
       font-weight: normal;
    }
    
    .search{       
        float: right;
        margin-top: gr(26);
        margin-right: gr(25);
        position: relative;
        i{
            font-size: gr(30);
            color: #848689;
            text-align: center;
            vertical-align: top;
        }
        span{
            display: inline-block;
            width: gr(62);
            background: #f7f7f7;
            font-size: gr(28);
            position: absolute;
            left: gr(-20);
            top: 0;
            display: none;
        }
    }
}




nav{
    width: 100%;
    height: gr(80);
    background: white;
    border-bottom: gr(1) solid #e0e0e0;
    .item-wrap{
        width: gr(484);
        height: 100%;
        margin: 0 auto;       
        span{
           width: gr(154);
           height: gr(77);
           font-size: gr(23);
           text-align: center;
           line-height: gr(77);
        }
        
        span:first-of-type{
            float: left;
                 
        }
        span:last-of-type{
            float: right;
        }
    }
}

.active{
    color: #D62D31;
    border-bottom: gr(4) solid #D62D31;
}

.un-active{
    color: #333333;
}

.product-wrap{
    width: 100%;
    height: gr(239);
    border-bottom:gr(1) solid #e0e0e0;
    margin-top: gr(20);
}

.product{
    width: gr(554);
    height: gr(200);
    font-size: 0;
    margin: 0 auto;
    position: relative;
//  float: right;
    .imgwrap{
        width: gr(200);
        height: gr(200);
        display: inline-block;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .description{
        width: gr(354);
        height: gr(200);
        display: inline-block;
        vertical-align: top;
        .desc-1{
            font-size: gr(26);
            margin-left: gr(25);
            line-height: gr(39);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .desc-2{
            font-size: gr(23);
            margin-left: gr(25);
            margin-top: gr(23);
            color: #999999;
            span:nth-of-type(2){
                margin-left: gr(10);
            }
        }
        
        .desc-3{
            height: gr(44);
            font-size: gr(23);
            margin-left: gr(25);
            margin-top: gr(26);
            color: #999999;
            em{
                color: #D62D31;
                font-size: gr(29);
                vertical-align: middle;
            }
            div:first-of-type{      
                float: left;
                height: gr(29);
            }
            
        }
    }
}

.bar-btn {
    width: gr(44);
    height: gr(44);
    float: right;
    img {
        width: 100%;
    }
}



.btn-group{
    width: gr(560);
    height: gr(70);
    margin: 0 auto;
//  display: none;
    .add{
        width: gr(268);
        height: gr(69);
        float: left;
        text-align: center;
        line-height: gr(68);
        margin-top: gr(14);
        font-size: gr(26);
        border: gr(1) solid #bcc1c4;
        border-radius: gr(5) gr(5);    
        a{
            color: black;
        } 
    }
    
    .manage{
        width: gr(268);
        height: gr(68);
        float: right;
        text-align: center;
        line-height: gr(68);
        margin-top: gr(14);
        font-size: gr(26);
        border: gr(1) solid #bcc1c4;
        border-radius: gr(5) gr(5);
    }
}

.status{
    background: #d62d31;
    color: white;
}

.throw{
    width: 100%;
    position: absolute;
    right: -100%;
    top: gr(80);
    bottom: 0;
//  display: none;
}

.make-sure{
    width: gr(35);
    height: gr(200);
    margin-left: gr(20);
    position: absolute;
    display: none;
    label{
        width: gr(33);
        height: gr(33);
        border: 1px solid #cdcdcd;
        border-radius: 50% 50%;
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: gr(-17.5);
        z-index: 2;       
    }
    
    input{
        width: gr(35);
        height: gr(35);
        position: absolute;
        top: 50%;
        left: gr(2);
        margin-top: gr(-17.5);
        z-index: 10;
        opacity: 0;
    }
    
    input:checked+label{
        background: url(../img/product_img/product_03.png) 0 0 no-repeat;
        background-size: cover;
    }
}


.manage-panel{
    width: 100%;
    height: gr(99);
    font-size: 0;
    display: none;
    position: absolute;
    bottom: gr(-99);
    .inner{
      width: gr(600);
      height: gr(58);
      margin: gr(19) auto 0;  
    }
    span{
        width: gr(138);
        height: gr(58);
        display: inline-block;
        font-size: gr(23);
        text-align: center;
        line-height: gr(58);
        border: gr(1) solid #d2d2d2;
        color: #666666;
        a{
            display: inline-block;
            color: #666666;
            width: 100%;
            height: 100%;
        }
       
    }
    span:first-of-type{
        border: none;
        width: gr(104);
        text-align: right;
    }
    span:first-of-type~span{
        margin-left: gr(20);
    }
    .to-sale{
        position: absolute;
        right: gr(195);
        top: gr(20);
        display: none; 
    }
}


.select-all{
    position: relative;
    .after {
        width: gr(33);
        height: gr(33);
        margin-top: gr(9);
        border: 1px solid #cdcdcd;
        border-radius: 50% 50%;
        display: inline-block;
        position: absolute;
        left: 0;
        top: gr(4);
        z-index: 2;
    }
    .front {
        width: gr(124);
        height: gr(58);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        opacity: 0;
    }
    .front:checked+.after {
        background: url("../img/product_img/product_03.png") 0 0 no-repeat;
        background-size: cover;
    }

}


.hide-bar{
    width: gr(600);
    height: gr(110);
    position: absolute;
    left: gr(-35);
    top: gr(15);
    background: rgba(0,0,0,0.8);  
    border-radius: gr(10) gr(10);
    font-size: 0;
    display: none;
    li{
        width: 20%;
        height: gr(110);
        display: inline-block;
        .icon{
            width: gr(46);
            height: gr(46);
            margin: gr(17) auto 0;  
            img{
                width: 100%;
            }
        }
        h6{
//          width: gr(40);
            margin: 0 auto;
            font-size: gr(20);
            font-weight: normal;
            color: #ffffff;
            text-align: center;
            margin-top: gr(16);
        }
        
    }
   
}
.hide-bar::after{
       content: '';
       display: inline-block;
       width: 0;
       height: 0;
       border-top: gr(15) solid rgba(0,0,0,0.7);
       border-left: gr(13.5) solid transparent;
       border-right: gr(13.5) solid transparent;
       position: absolute;
       bottom: gr(-12);
       right: gr(18);
   } 
   



.sale-prompt {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 122;
    .inner{
        width: gr(550);
        height: gr(300);
        background: #f8f8f8;
        border-radius: gr(10);
        margin: 50% auto 0;
        .top{
            width: gr(500);
            height: gr(154);
            margin: 0 auto;
            border-bottom: gr(1) solid #dcdcdc;
            text-align: center;
            line-height: gr(154);
            font-size: gr(23);
            color: #666666;           
        }
        .bottom{
            width: gr(500);
            height: gr(144);
            margin: 0 auto;
            font-size: 0;
            padding-top: gr(32);
            span{
                width: gr(235);
                height: gr(80);
                font-size: gr(27);
                display: inline-block;
                text-align: center;
                line-height: gr(80);
                border-radius: gr(5);
            }
            span:first-of-type{
               color: #666666;
               background: white;
               border: gr(1) solid #b7b7b7;
            }
            span:last-of-type{
               color: white;
               background: #d62d31;
               margin-left: gr(25);
            }
        }
    }
}


.on-sale-success-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    display: none;  
    .on-sale-success{
        width:gr(249);
        height: gr(183);
        position: absolute;
        left: gr(196);
        top: 40%;
        z-index: 130;
        img{
            width: 100%;
        }
    }
}

.spread-prompt-wrap{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 150;
    display: none;
//  opacity: 0;
    .white-wrap{
        width: 100%;
        height: gr(720);
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        transform: translateY(gr(720));
        transition: all 300ms ease-in-out ;
        background: white;
        .spread-prompt{
            width: gr(501);
            height: gr(579);
            margin: 0 auto;
            li{
                width: gr(105);
                float: left;
                margin-left: gr(50);
                h6{
                    font-size: gr(21);
                    color: #999999;
                    text-align: center;
                    font-weight: normal;
                }
                .imgwrap{
                    width: gr(105);
                    height: gr(105);
                    background: white;
                    img{
                        width: 100%;
                    }
                }
            }
            
            li:nth-child(1),li:nth-child(4),li:nth-child(7){
                margin-left: gr(40);
            }
            li:nth-child(4),li:nth-child(5),li:nth-child(6){
                margin-top: gr(47);
                margin-bottom: gr(47);
            }
            li:nth-child(1),li:nth-child(2),li:nth-child(3){
                margin-top: gr(38);
            }
        }
        .spread-cancel{
            width: 100%;
            height: gr(103);
            text-align: center;
            color: #333333;
            line-height: gr(103);
            border-top: gr(1) solid #e0e0e0;
        }
    }
}

.spread-prompt-wrap .white-wrap.white-animation{
   transform: translateY(0);
}

.spread-prompt-wrap .white-wrap.close-white-animation{
   transform: translateY(gr(720)); 
}


.toTop-success-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    display: none;  
    .toTop-success{
        width:gr(249);
        height: gr(183);
        position: absolute;
        left: gr(196);
        top: 40%;
        z-index: 130;
        img{
            width: 100%;
        }
    }
}